<template>
  <div class="weui-tab">
    <div class="weui-tabbar">
      <router-link :to="{name:'collection.photo'}" replace class="weui-tabbar__item">
        <div class="weui-tabbar__icon photo"></div>
        <p class="weui-tabbar__label">照片</p>
      </router-link>
      <router-link :to="{name:'collection.album'}" replace class="weui-tabbar__item">
        <div class="weui-tabbar__icon album"></div>
        <p class="weui-tabbar__label">相册</p>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "collectionFooter"
  }
</script>

<style scoped>
  .weui-tab{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.3rem;
  }
  .weui-tabbar{
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.49);
  }
  .weui-tabbar:before{
    display: none;
  }
  .weui-tabbar__item{
    padding: 0;
    padding-top: 0.4rem;
  }
  .weui-tabbar__icon{
    width: 1.1rem;
    height: 1.1rem;
  }
  .weui-tabbar__label{
    color: #666666;
    font-size: 0.5rem;
    line-height: 0.8rem;
  }
  .router-link-active .weui-tabbar__label{
    color: #C50000;
  }
  .photo{
    background-image: url("../../../../static/images/collection/photo.png");
    background-repeat: round;
  }
  .album{
    background-image: url("../../../../static/images/collection/album.png");
    background-repeat: round;
  }
  .router-link-active .photo{
    background-image: url("../../../../static/images/collection/photo_active.png");
  }
  .router-link-active .album{
    background-image: url("../../../../static/images/collection/album_active.png");
  }
</style>
